<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/style.css">
  <title>Vue-实现</title>
  <meta name="description" content="完美实现">
  <script src="http://srxboys.cn:8885/dist/index.js" id="rxcornor" link="https://gitee.com/cheere/screenscroll" target="_blank" title="Gitee" className="a b"></script>
</head>

<body>
  <!-- 默认样子 -->
  <div id="app">
    <page />
  </div>

  <!-- Vue 模板 -->
  <template id='page'>
    <div class="fullPage" ref="fullPage">
      <div class="fullPageContainer" ref="fullPageContainer" @mousewheel="mouseWheelHandle" @wheel="DOMMouseScroll"
        @DOMMouseScroll="DOMMouseScroll" @MozMousePixelScroll="DOMMouseScroll">
        <div class="section section1">1</div>
        <div class="section section2">2</div>
        <div class="section section3">3</div>
        <div class="section section4">4</div>
      </div>
      <div class="point">
        <ul>
          <li v-for="i in count" :key="'point_'+i"
            @click="click(i)" :class="{select: fullpage.current === i}"></li>
        </ul>
      </div>
    </div>
  </template>

  <script src="./js/vue.js"></script>
  <script>
    // root == Vue实例
    const app = new Vue({
      el: '#app',
      components: { //局部
        page: {
          template: '#page',
          data() {
            return {
              fullpage: {
                current: 1,
                isScrolling: false,
                daltaY: 0,
              },
              count: 0,
            };
          },
          mounted() {
            this.$nextTick(() => {
              this.getCount()
            })
          },
          methods: {
            getCount() {
              let count = 0
              const fullpageRef = this.$refs.fullPageContainer
              if (fullpageRef) {
                count = fullpageRef.childElementCount
              }
              this.count = count
              return count
            },
            next() {
              // 往下切换
              const len = this.count; // 页面的个数
              if (this.fullpage.current + 1 <= len) {
                // 如果当前页面编号+1 小于总个数，则可以执行向下滑动
                this.fullpage.current += 1; // 页面+1
                this.move(this.fullpage.current); // 执行切换
              }
            },
            pre() {
              // 往上切换
              if (this.fullpage.current - 1 > 0) {
                // 如果当前页面编号-1 大于0，则可以执行向下滑动
                this.fullpage.current -= 1 // 页面+1
                this.move(this.fullpage.current) // 执行切换
              }
            },
            click(index) {
              if (this.fullpage.current !== index) {
                this.fullpage.current = index // 页面+1
                this.move(index)
              }
            },
            move(index) {
              this.fullpage.isScrolling = true; // 为了防止滚动多页，需要通过一个变量来控制是否滚动
              this.directToMove(index) // 执行滚动
              setTimeout(() => {
                // 这里的动画是1s执行完，使用setTimeout延迟1s后解锁
                this.fullpage.isScrolling = false;
              }, 1010)
            },
            directToMove(index) {
              const height = this.$refs["fullPage"].clientHeight; // 获取屏幕的宽度
              const scrollPage = this.$refs["fullPageContainer"]; // 获取执行tarnsform的元素
              let scrollHeight = 0; // 计算滚动的告诉，是往上滚还往下滚
              scrollHeight = -(index - 1) * height + "px";
              scrollPage.style.transform = `translateY(${scrollHeight})`;
              this.fullpage.current = index;
            },
            DOMMouseScroll(e) {
              console.log('DOMMouseScroll......')
              const result = this.mouseWheelHandle(e)
              console.log('result=', result)
              if (typeof result === 'boolean') {
                return result
              }
            },
            mouseWheelHandle(event) {
              console.log('...... mouseWheelHandle')
              // 监听鼠标监听
              // 添加冒泡阻止
              const evt = event || window.event;
              if (evt.stopPropagation) {
                evt.stopPropagation();
              } else {
                evt.returnValue = false;
              }
              if (this.fullpage.isScrolling) {
                // 判断是否可以滚动
                return false;
              }
              const e = event.originalEvent || event;
              this.fullpage.deltaY = e.deltaY || e.detail; // Firefox使用detail
              if (this.fullpage.deltaY > 0) {
                this.next();
              } else if (this.fullpage.deltaY < 0) {
                this.pre();
              }
            },
          }
        }
      },
    })
  </script>
</body>

</html>